<template>
	<view class="content">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" :isBack="true" class='tn-custom-nav-bar__back'>
				<text v-if="!showHome" class='icon tn-icon-left' @click="goBack"></text>
				<text v-if="showHome" class='icon tn-icon-home-capsule-fill' @click="goHome"></text>
			</view>
			{{transferItem.name}}
		</tn-nav-bar>


		<!-- 页面内容 -->
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view>
				<!-- 1.进度 -->
				<view style="padding-left: 20rpx;padding-right: 20rpx;display: flex;flex-direction: column;">
					<view style="width:100%;height:20rpx" />
					<van-progress :percentage="progressPercentage" :pivot-text="progressTitle" stroke-width="22rpx"
						pivot-color="#82B2FF" color="linear-gradient(to right, #9EBEFF, #D8E5FF)" />
				</view>


				<view class="shadowBox">
					<view :style="{'height':scrollViewHeight + 'px'}">
						<!-- 第一种类型 选择题 -->
						<QuestionOption ref="questionOption" :transferViewHeight="scrollViewHeight"
							:transferItemList="subjectList" @actionEventManager="optionChangeManager" />
					</view>

				</view>
			</view>
		</view>
		

	</view>
</template>






<script>
	import config from '../../common/config.js'
	import {
		QuestionQuestion_List
	} from './questionApi.js'
	import {
		ResultResultSubmit
	} from '@/api/records.js'

	import QuestionOption from '@/components/QuestionOption/QuestionOption.vue'


	export default {
		components: {
			QuestionOption,
	
		},
		onShareAppMessage() {

			var nPath = 'pages/question/questionDetail' + '?partId=' + this.transferItem.partId

			return {
				title: this.transferItem.name, //分享的标题
				path: nPath, //点击分享链接之后进入的页面路径
				imageUrl: this.transferItem.abulm,
			};
		},
		data() {
			return {
				// 0.是否显示回到首页按钮
				showHome: getCurrentPages().length == 1 ? true : false,
				// 2. 接口是否加载中
				loading: true,

				transferItem: {},
				// 1. 高度
				scrollViewHeight: 0,
				// 2. 传入的subjectId
				subjectId: '',
				// 3. 判断是否需要提交年龄
				needAge:false,


				currentType: 0, //当前题型
				subjectIndex: 0, //跳转索引
				swiperHeight: '800rpx', //
				questionSubTitle: '',
				subjectList: [],
				// 进度条
				progressTitle: "",
				progressPercentage: 0,
			}
		},


		mounted() {
			console.log("mounted")
		},

		onLoad(item) {
			console.log('页面加载')
			if (item) {
				this.transferItem = item;
				this.interfaceQuestionQuestion_List(item.partId);
			}
		},
		onShow() {
			console.log('页面显示')
		},
		onReady() {
			console.log('页面初次显示')
			var windowHeight = uni.getSystemInfoSync().windowHeight;
			var safeArea = uni.getSystemInfoSync().safeArea.bottom - uni.getSystemInfoSync().safeArea.height;
			var vuex_custom_bar_height = this.vuex_custom_bar_height;
			var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			var nwindowHeight = windowHeight - vuex_custom_bar_height - safeArea - statusBarHeight;
			this.scrollViewHeight = nwindowHeight - 54;
		},
		onHide() {
			console.log('页面隐藏')
		},
		onUnload() {
			console.log('页面卸载')
		},
		onBackPress() {
			console.log('页面返回...')
		},
		onShareAppMessage() {
			console.log('分享!')
		},
		onReachBottom() {
			console.log('下拉加载...')
		},
		onPageScroll() {
			console.log('页面滚动...')
		},
		onPullDownRefresh() {

		},



		methods: {
			goBack() {
				uni.navigateBack();
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/root/main'
				});
			},

			// 接口
			interfaceQuestionQuestion_List(subjectId) {
				this.subjectId = subjectId;
				var params = {
					subSubjectId: subjectId
				};
				var that = this;
				this.loading = true;
				QuestionQuestion_List(params).then(res => {
					this.loading = false;
					if (res.list.length > 0) {
						res.list.forEach(item => {
							item.userAnswerType = "";
						});
					}

					that.subjectList = res.list;

					// 重置进度条
					that.progressStatusManager(1);
					debugger
					that.$refs.questionOption.reload(that.subjectList,res.needAge,res.needGender);
				});
			},

			// 结果提交
			interfaceResultResultSubmit(item) {
				var params = {
					questionList: item.list,
					subjectId: this.subjectId,
					age:item.age,
					gender:item.gender
				}
				
				ResultResultSubmit(params).then(res => {
					console.log(res);
					if (res.recordId) {

						uni.reLaunch({
							url: '/pages/history/historyDetail?id=' + res.recordId
						})
					}
				});
			},
















			// 重置
			resetDataManager() {

			},

			// 选项
			optionChangeManager(method, item, cname, realItem) {
				console.log(method, item, cname, realItem);
				if (method === 'dataBack') {
					debugger
					this.progressStatusManager(item);
				} else if (method === 'submit') {
					
					this.interfaceResultResultSubmit(item);
				}
			},
			
			// 进度条
			progressStatusManager(currentPage){
				if (currentPage == this.subjectList.length){
					this.progressPercentage = (currentPage * 100.0 / this.subjectList.length).toFixed(0);	
				} else {
					this.progressPercentage = ((currentPage - 1) * 100.0 / this.subjectList.length).toFixed(0);
				}
				
				this.progressTitle = currentPage + " / " + this.subjectList.length;
			}




		}
	}
</script>

<style lang='scss' scoped>
	@import "../../colorui/animation.css";
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css";



	page {
		background-color: #FFFFFF;
	}

	.cu-form-group {
		justify-content: flex-start
	}

	.cu-form-group .title {
		padding-left: 30upx;
		padding-right: 0upx;
	}

	.cu-form-group+.cu-form-group {
		border-top: none;
	}

	.cu-bar-title {
		min-height: 50upx;
	}

	.cu-list.menu>.cu-item-error {
		justify-content: flex-start;
	}

	.shadowBox {
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 17rpx;
		margin: 15rpx;
		width: auto;
		margin: 20rpx 20rpx;

	}

	.button_W {
		width: 100rpx;
	}


	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 50%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}





	/* swiper */
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>